<template>
  <!-- 拖拽上传 -->
  <upload-base ref="baseRef" v-model="fileList" :limit="limit" v-bind="attrs">
    <div class="file_drag">
      <img src="@/assets/image/upload_clound.png" />
      <div>{{ notice }}</div>
      <el-button type="primary" round>Choose File</el-button>
    </div>
  </upload-base>
  <ul class="file_list_show">
    <li v-for="(file, index) in fileList" :key="index">
      <img :src="getIcon(file)" />
      <span
        :class="file.link || file?.raw?.link ? 'link_cursor' : 'link_name'"
        @click="handleFileView(file)"
        >{{ file.name || file.raw.name }}</span
      >
      <span class="time_delete">
        <time>{{
          dateFormat(
            file.date || file?.raw?.date || file.lastModifiedDate || file?.raw?.lastModifiedDate
          )
        }}</time>
        <img :src="Delete" @click="handleRemove(index)" />
      </span>
    </li>
  </ul>
</template>

<script setup>
import UploadBase from './UploadBase.vue';
import { vModelValue } from '@/utils/hooks.js';
import { dateFormat } from '@/utils/variables.js';
import { useAttrs } from 'vue';

import IconPdf from '@/assets/image/Pdf.png';
import IconExcel from '@/assets/image/Excel.png';
import IconPhoto from '@/assets/image/Photo.png';
import IconFile from '@/assets/image/File.png';
import Delete from '@/assets/image/delete.png';

const props = defineProps({
  prop: {
    type: String,
    default: '',
  },
  modelValue: {
    type: Array,
    default: [],
  },
  notice: {
    type: String,
    default: 'Only supports uploading of files in excel format.',
  },
  iconImg: {
    // 自定义图标
    type: String,
    default: '',
  },
  limit: {
    type: Number,
    default: 1,
  },
});

const emits = defineEmits(['update:modelValue', 'itemEvent']);

const imageFormat = ['jpg', 'jpeg', 'gif', 'png', 'bmp', 'pct', 'raw', 'tga', 'tif', 'psd', 'webp'];

const { newValue: key } = vModelValue(props, emits);
let fileList = ref(key);

const baseRef = ref();
const attrs = useAttrs();

function getIcon(row) {
  let rowName = row?.name || row?.raw?.name;
  if (!rowName) return props.iconImg || IconFile;
  let url = IconFile;
  let fileSuffix = rowName.substring(rowName.lastIndexOf('.') + 1);
  fileSuffix = fileSuffix?.toLowerCase(); // 转小写匹配
  if (imageFormat.indexOf(fileSuffix) > -1) {
    url = IconPhoto;
    fileSuffix = 'image';
  } else if (fileSuffix === 'pdf') {
    url = IconPdf;
  } else if (fileSuffix === 'xls' || fileSuffix === 'xlsx') {
    url = IconExcel;
  }
  return props.iconImg || url;
}

function handleRemove(index) {
  fileList.value.splice(index, 1);
  baseRef.value.init(fileList.value);
}

function handleFileView(file) {
  let url = file.link || file?.raw?.link;
  let name = file.name || file?.raw?.name;
  let uid = file.uid || file?.raw?.uid;
  let type = file?.type || file?.raw?.type || '';
  if (url) {
    // 列表或者详情接口有返回url地址
    let params = encodeURIComponent(
      JSON.stringify({
        url,
        name,
      })
    );
    let fileSuffix = name?.substring(name.lastIndexOf('.') + 1);
    fileSuffix = fileSuffix?.toLowerCase(); // 转小写匹配
    if (imageFormat.indexOf(fileSuffix) > -1) fileSuffix = 'image';
    emits('itemEvent', {
      ...attrs,
      ...file,
      fileParams: params,
      component: 'viewFile',
      fileSuffix,
    });
  } else {
    uid ? '' : ElMessage.warning('No attachment address found');
  }
}

function resetFileList() {
  baseRef.value.init([]);
}

defineExpose({
  resetFileList,
});
</script>

<style lang="scss" scoped>
.file_drag {
  width: 760px;
  height: 260px;
  border: 1px dashed #cdcdcd;
  border-radius: 10px;
  text-align: center;
  color: #606266;
  padding: 50px;
  box-sizing: border-box;
  margin: 0 auto 10px;
  img {
    font-size: 30px;
    margin-bottom: 15px;
  }
  button {
    margin-top: 30px;
  }
}

.file_list_show {
  margin-top: 10px;
  width: 100%;
  li {
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    background: #f7f7f7;
    border-radius: 4px;
    padding: 0 16px 0 6px;
    margin-bottom: 10px;
    height: 32px;
    > img {
      width: 18px;
      height: 18px;
      margin-right: 10px;
    }
    .time_delete {
      margin-left: auto;
      time {
        margin-right: 30px;
      }
      img {
        position: relative;
        top: 4px;
        cursor: pointer;
      }
    }
  }
}
.link_cursor {
  cursor: pointer;
}
</style>
